<template>
	<div>
		<div class="textTile flex-h">
		
			<span class="sp1 flex1">职业兴趣测试</span>
			<span class="sp2"><b>{{tabNum+1}}</b><i>/182</i></span>
		</div>
		<div v-if="tabNum<180" v-for="(item,index) in intelData.history" :key="index">
			<div class="textQuestions" v-show="index===tabNum">
				<span>{{item.issue}}</span>
			</div>


			<div class="commonBox zyxq flex-h" v-show="index===tabNum">
				<span class="flex1 sp1" @click="clcyes(item.val1,index,item.state)">{{item.type===1?'喜欢':item.type===2?'能':'有兴趣'}}</span>
				<span class="flex1 sp1" @click="clcno(index)">{{item.type===1?'不喜欢':item.type===2?'不能':'没兴趣'}}</span>
			</div>
		</div>
		<div v-if="tabNum===180">
			<div class="textQuestions">
				<span>181.请对你在以下方面的能力进行强弱排序</span>
			</div>
			<div class="titlesDrag flex-h">
				<span class="sp1">强</span>
				<span class="flex1 sp2">以下项目可长按图标拖动排序</span>
			</div>
			<specIssue :items='ites' v-on:fromChildData='getChildData'></specIssue>
			<div class="titlesDrag titlesDrag1 flex-h">
				<span class="sp1">弱</span>
				<span class="flex1 sp2"></span>
			</div>
			<div class="commonBox zyxq">
				<span class="sp3" @click="nextZu('')">下一组</span>
			</div>
		</div>
		<div v-if="tabNum===181">
			<div class="textQuestions">
				<span>182.请对你在以下方面的技能进行强弱排序</span>
			</div>
			<div class="titlesDrag flex-h">
				<span class="sp1">强</span>
				<span class="flex1 sp2">以下项目可长按图标拖动排序</span>
			</div>
			<specIssue :items='ites2' v-on:fromChildData='getChildData'></specIssue>

			<div class="titlesDrag titlesDrag1 flex-h">
				<span class="sp1">弱</span>
				<span class="flex1 sp2"></span>
			</div>
			<div class="commonBox zyxq">
				<span class="sp3" @click="nextZu('IndResult')">做完了</span>
			</div>
		</div>
	</div>
</template>

<script>
	import ls from 'store2';
	import specIssue from '~/components/specIssue'
	import intelData from '~/static/json/intelligence.json'
	export default {
		props: {
			// 			message: String,
			// 			col: String
		},
		components: {
			specIssue
		},
		data() {
			return {
				ites: [{
					nm: '机械操作能力',
					type: 'R'
				}, {
					nm: '科学研究能力',
					type: 'I'
				}, {
					nm: '艺术创作能力',
					type: 'A'
				}, {
					nm: '解释表达能力',
					type: 'S'
				}, {
					nm: '商业洽谈能力',
					type: 'E'
				}, {
					nm: '事务执行能力',
					type: 'C'
				}],
				ites2: [{
					nm: '体育技能',
					type: 'R'
				}, {
					nm: '数学技能',
					type: 'I'
				}, {
					nm: '音乐技能',
					type: 'A'
				}, {
					nm: '交际技能',
					type: 'S'
				}, {
					nm: '领导技能',
					type: 'E'
				}, {
					nm: '办公技能',
					type: 'C'
				}],
				tabNum: 0,
				intelData: intelData,
				zyxqScore: [0, 0, 0, 0, 0, 0]
			};
		},
		computed: {

		},
		mounted: function() {
			console.log('worthData',intelData)
		},
		methods: {
			getChildData(data) {
				this.childData = data
				console.log(this.childData)
			},
			clcyes(score, indexs, stats) {
				this.tabNum = indexs + 1;

				switch (stats) {
					case "R":
						this.zyxqScore[0] += 1
						break;
					case "S":
						this.zyxqScore[1] += 1
						break;
					case "I":
						console.log('I')
						this.zyxqScore[2] += 1
						break;
					case "E":
						console.log('E')
						this.zyxqScore[3] += 1
						break;
					case "A":
						console.log('A')
						this.zyxqScore[4] += 1
						break;
					default:
						console.log('C')
						this.zyxqScore[5] += 1
				}
				ls.set('scoreData', this.zyxqScore)
			},
			clcno(indexs) {
				this.tabNum = indexs + 1;
				ls.set('scoreData', this.zyxqScore)
			},
				nextZu(url) {
				
				if (this.childData) {
					this.childData.forEach(ite => {
						if (ite.type === 'R') {
							this.zyxqScore[0]+=ite.numR
						}
						if (ite.type === 'S') {
							this.zyxqScore[1]+=ite.numS
						}
						if (ite.type === 'I') {
							this.zyxqScore[2]+=ite.numI
						}
						if (ite.type === 'E') {
							this.zyxqScore[3]+=ite.numE
						}
						if (ite.type === 'A') {
							this.zyxqScore[4]+=ite.numA
						}
						if (ite.type === 'C') {
							this.zyxqScore[5]+=ite.numC
						}
					})
				} else {
					this.zyxqScore[0]+=6
					this.zyxqScore[1]+=5
					this.zyxqScore[2]+=4
					this.zyxqScore[3]+=3
					this.zyxqScore[4]+=2
					this.zyxqScore[5]+=1
				}
				if (url === 'IndResult') {
					ls.set('scoreData', this.zyxqScore)
					let obj={
						status:1,
						worthScore:this.zyxqScore
					}
					ls.set('resultPar',obj)
					this.commonJs.gosto(url)
					
				}else{
					this.tabNum += 1;
				}
			},
				goto(routerName, queryData) {
				this.$router.replace({
					path: routerName,
					query: {
						type: queryData
					}
				});
			}
		}
	};
</script>


<style scoped lang="less">
		.textTile {
		padding-bottom: 0.4rem;
		height: auto;
		width: 100%;
		border-bottom: 0.01rem solid rgba(238, 238, 238, 1);
	
		.sp1 {
			font-size: 0.4rem;
			font-weight: bold;
			color: rgba(34, 34, 34, 1);
			line-height: 0.44rem;
		}
	
		.sp2 {
			b {
				font-size: 0.4rem;
				font-weight: bold;
				color: rgba(108, 191, 32, 1);
			}
	
			i {
				font-size: 0.22rem;
				font-weight: bold;
				color: rgba(187, 187, 187, 1);
				// line-height:30px;
			}
		}
	}
	.textQuestions {
		width: 100%;
		height: auto;
		padding-top: 0.3rem;

		span {
			font-size: 0.32rem;
			font-weight: bold;
			color: rgba(34, 34, 34, 1);
			line-height: 0.45rem;
		}
	}

	.titlesDrag {
		width: 100%;
		height: 0.8rem;
		margin-top: 0.5rem;

		.sp1,
		.sp2 {
			font-size: 0.26rem;
			font-weight: bold;
			box-sizing: border-box;
			height: 0.8rem;
		}

		.sp1 {
			width: 1.5rem;
			padding-top: 0.4rem;
			color: rgba(82, 196, 26, 1);

		}

		.sp2 {
			padding-top: 0.2rem;

			color: rgba(187, 187, 187, 1);

		}
	}

	.titlesDrag1 {
		height: 0.4rem;
		margin-top: 0;
		font-size: 0.3rem;

		.sp1,
		.sp2 {
			height: 0.4rem;
			padding-top: 0;
			color: rgba(187, 187, 187, 1);
		}
	}

	.commonBox {
		position: absolute;
		width: 100%;
		height: 0.9rem;
		left: 0;
		bottom: 0.4rem;
		padding: 0 0.3rem;
		box-sizing: border-box;
	}

	.zyxq {
		.sp1 {
			height: 0.9rem;
			border-radius: 0.1rem;
			border: 0.02rem solid rgba(238, 238, 238, 1);
			font-size: 0.3rem;

			font-weight: bold;
			color: rgba(34, 34, 34, 1);
			line-height: 0.9rem;
			text-align: center;
		}

		.sp3 {
			width: 6.1rem;
			height: 0.9rem;
			border-radius: 0.1rem;
			border: 0.02rem solid rgba(108, 191, 32, 1);
			margin: 0 auto;
			display: block;
			line-height: 0.9rem;
			text-align: center;
			font-size: 0.3rem;
			font-weight: bold;
			color: rgba(108, 191, 32, 1);
		}

		span:nth-of-type(1) {
			margin-right: 0.2rem;
		}
	}
</style>
